<template>
  <div class="app-container">
    <el-button
      icon="el-icon-plus"
      type="primary"
      @click="showAdd"
    >{{ $t('add') }}
    </el-button>
    <el-table :data="versionList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item :label="$t('updateDate')">
              <span>{{ formatDate(props.row.updateDate) }}</span>
            </el-form-item>
            <el-form-item :label="$t('id')">
              <span>{{ props.row.activityVersionId }}</span>
            </el-form-item>
            <el-form-item :label="$t('createdDate')">
              <span>{{ formatDate(props.row.createdDate) }}</span>
            </el-form-item>
            <el-form-item :label="$t('path')">
              <span>{{ props.row.path }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="version" :label="$t('version')"/>
      <el-table-column :label="$t('disable')">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.disable"
            @change="disableChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column

        :label="$t('function')"
        width="250"
      >
        <template slot-scope="scope">
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 15px 0;text-align: right;">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog :visible.sync="dialogVersionFormVisible">
      <el-form :model="activityVersion">
        <el-form-item :label="$t('version')" label-width="20%">
          <el-input v-model="activityVersion.version"/>
        </el-form-item>
        <el-form-item :label="$t('file')" label-width="20%">
          <el-upload
            ref="upload"
            :headers="headers"
            drag
            name="file"
            :action="baseURL+'/app/activity/version/insert'"
            :auto-upload="false"
            :on-success="handleSuccess"
            :on-error="handleError"
            :data="activityVersion"
          >
            <i class="el-icon-upload"/>
            <div class="el-upload__text">将执行文件ZIP拖到此处，或<em>点击上传</em></div>
            <div slot="tip" class="el-upload__tip">只能上传不超过1G</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVersionFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="submitUpload">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { cancelNotice, failureNotice, formatDate, successNotice } from '@/util/common'
import {
  deleteAppActivityVersion,
  pageGetAppActivityVersion,
  updateAppActivityVersion
} from '@/api/app/appActivityVersionApi'
import { getPageSize, getToken } from '@/util/storage'

export default {
  name: 'ActivityVersion',
  data() {
    return {
      baseURL: window.VUE_APP_BASE_API, // 'http://localhost:7778',
      activityId: null,
      activityName: null,
      versionList: [],
      currentPage: 1,
      pagerCount: 4,
      total: 0,
      pageSize: getPageSize(),
      dialogVersionFormVisible: false,
      activityVersion: {},
      headers: {
        'access-token': getToken()
      }
    }
  }, created() {
    const param = this.$route.query
    this.activityId = param.activityId
    this.activityName = param.activityName
    this.pageGetAppActivityVersion()
  }, methods: {
    formatDate(time) {
      return formatDate(this, time)
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleSuccess(res, file, fileList) {
      successNotice(this)
      this.pageGetAppActivityVersion()
      this.dialogVersionFormVisible = false
    },
    handleError(err, file, fileList) {
      console.log(err)
      failureNotice(this)
    },
    showAdd() {
      this.dialogVersionFormVisible = true
      this.activityVersion = {
        activityId: this.activityId
      }
    },
    handleDelete(item) {
      const that = this
      this.$confirm(this.$t('delete'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(function() {
        deleteAppActivityVersion({ activityVersionId: item.activityVersionId }).then(() => {
          that.pageGetAppActivityVersion()
        })
      }).catch(function() {
        cancelNotice(that)
      })
    },
    disableChange(item) {
      updateAppActivityVersion({
        activityVersionId: item.activityVersionId,
        disable: item.disable
      }).then(res => {
        this.pageGetAppActivityVersion()
      })
    },
    handleCurrentChange(item) {
      this.currentPage = item
      this.pageGetAppActivityVersion()
    },
    pageGetAppActivityVersion() {
      pageGetAppActivityVersion({
        activityId: this.activityId,
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          this.versionList = data.data
        }
      })
    }
  }
}
</script>


